<template>
  <div class="detail">
    <div class="list">
      <van-button type="primary" @click="checkAll">全选</van-button>
      <van-button type="info" @click="toggleAll">反选</van-button>
      <van-button color="#7232dd" @click="copy()">复制</van-button>
      <!-- 列表 -->
      <van-loading size="24px" vertical v-show="loading">加载中...</van-loading>
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in urlList"
            clickable
            :key="item.video_title"
            :title="`${item.video_title}`"
          >
            <template #right-icon>
              <van-checkbox :name="item" ref="checkboxes" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>
  </div>
</template>

<script>
import { geturlList } from "@/api/index";
export default {
  name: "Detail",
  data() {
    return {
      videoId: 0,
      urlList: [],
      result: [],
      loading:true
    };
  },
  mounted() {
    this.getDetail();
  },
  // watch:{
  //   result:{
  //     handler(val){
  //       console.log(val)
  //     }
  //   }
  // },
  methods: {
    getDetail() {
      this.videoId = this.$route.query.id;
      geturlList({ videoId: this.videoId }).then((res) => {
        this.urlList = res.data.data;
        this.loading =false
      });
    },
    get() {
      console.log(this.result);
    },
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll();
    },
    copy() {
      let copystr = "";
      this.result.map((item) => (copystr += item.video_url + "\n"));
      this.$copyText(copystr).then((res) => this.$toast.success("复制成功"));
    },
  },
};
</script>


<style scoped>
.detail {
  margin: 1rem;
}
</style>
